<template>
   <div>
        <h1>购物车</h1>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>小计</th>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in shopcartList" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{item.pid}}</td>
                    <td>{{item.pname}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="item.num--">-</button>
                        {{item.num}}
                        <button @click="item.num++">+</button>
                    </td>
                    <td>{{item.price*item.num}}</td>
                    <td>
                        <button>删除</button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="7">
                        总价:{{getTotal()}}
                    </td>
                </tr>
            </tfoot>
        </table>
   </div>
</template>

<script>
export default {
    data(){
        return{
            shopcartList:[
                {
                    pid:'1001',
                    pname:'格力空调品圆1P',
                    price:2180,
                    num:1
                },
                {
                    pid:'1002',
                    pname:'vivo一亿像素相机手机',
                    price:3165,
                    num:2
                }
            ]
        }
    },
    methods:{
        getTotal(){
            return this.shopcartList.reduce((pre,cur)=>pre+cur.price*cur.num,0)
        }
    }
    
}
</script>

<style>
   table{
    border-collapse: collapse;
    width: 800px;
   }
   td,th{
    border: 1px solid #000;
    text-align: center;
    padding: 10px;
   }
</style>